<template>
  <view class="container">
	  <custom-status-bar></custom-status-bar>
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-icon" @click="goBack()">
        <uni-icons type="left" size="20" color="#666"></uni-icons>
      </view>
      <text class="title">账号管理</text>
    </view>

    <!-- 账号管理卡片 -->
    <view class="card account-management">
      <!-- 绑定微信 -->
      <view class="item" @click="handleWechatBinding">
        <text>绑定微信</text>
        <view class="status-container">
          <text class="status">已绑定</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 注销账号 -->
      <view class="item" @click="showConfirmDialog">
        <text>注销账号</text>
        <view class="status-container warning">
          <text class="status">注销后无法恢复，请谨慎操作</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
import { ref } from 'vue';

const wechatBound = ref(true); // 模拟微信绑定状态

const handleWechatBinding = () => {
  if (wechatBound.value) {
    uni.showModal({
      title: '解绑提示',
      content: '确定要解绑微信账号吗？',
      success: (res) => {
        if (res.confirm) {
          // 实际开发中调用解绑接口
          wechatBound.value = false;
        }
      }
    });
  } else {
    // 跳转绑定微信页面
    uni.navigateTo({ url: '/pages/wechat-binding' });
  }
};

const showConfirmDialog = () => {
  // uni.showModal({
  //   title: '注销账号',
  //   content: '注销账号后所有数据将被清除，确定要继续吗？',
  //   showCancel: true,
  //   cancelText: '取消',
  //   confirmText: '确定',
  //   success: (res) => {
  //     if (res.confirm) {
  //       // 调用注销账号接口
  //     }
  //   }
  // });
 // 跳转绑定微信页面
 uni.navigateTo({ url: '/pages/logoff/logoff' });
};


const goBack= ()=>{
	const pages = getCurrentPages();
	if (pages.length > 1) uni.navigateBack()
		else  uni.switchTab({ url: '/pages/index/index' });
}


</script>

<style scoped>
.container {
	padding: 0 20rpx 150rpx 20rpx;
}

.header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
}

.back-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	font-size: 28rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.card {
  background: white;
  border-radius: 12rpx;
  margin-top: 20rpx;
  padding: 30rpx;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 30rpx;
   color: #797979;
}

.status-container {
  display: flex;
  align-items: center;
}

.status {
  margin-right: 10rpx;
  color: #313131;
}

.warning .status {
  color: #5f5f5f;
}

.item:last-child {
  border-bottom: none;
}
</style>